<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" class="demo-form-inline filter-container">
       <el-form-item label="账户类型" prop="userType">
        <el-select v-model="form.userType" placeholder="请选择账户类型">
          <el-option
            v-for="item in consts.ACCOUNT_TYPE"
            :label="item.title"
            :key="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员账户名：">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>

      <el-form-item>
        <el-col :span="12">
          <el-form-item prop="filterMin">
            <el-input v-model.number="form.filterMin">
              <template slot="prepend">
                <el-select v-model="form.filter" style="width: 120px;">
                  <el-option
                    v-if="[1,2,3,4,7,8].indexOf(item.value) !== -1"
                    v-for="item in consts.ORDER_FIELD_PLAYER"
                    :value="item.key"
                    :label="item.title"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1" style="text-align: center">
          -
        </el-col>
        <el-col :span="6">
          <el-form-item prop="filterMax">
            <el-input v-model.number="form.filterMax"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-button type="primary" v-waves icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
    </el-form>
    <div class="tip">
      <el-tip>
        注：目前只支持平层搜索，不可跨层搜索
      </el-tip>
    </div>
    <el-table :data="tableData.list"
              v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="账户名" align="center">
        <template slot-scope="{row}">
          <!--<el-tag class="pointer" @click.native="openDialog({props: row, dialogName: 'custom-dialog'})">-->
            {{row.userName}}
          <!--</el-tag>-->
        </template>
      </el-table-column>
        <el-table-column label="账户类型" fixed="left" width="120" align="center">
        <template slot-scope="{row}">
          {{row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
       <el-table-column label="充值额" align="center" prop="rechargeSum">
          <template slot-scope="{row}">
            {{row.rechargeSum | currency}}
          </template>
        </el-table-column>
       <el-table-column label="提现额" align="center" prop="withdrawSum">
          <template slot-scope="{row}">
            {{row.withdrawSum | currency}}
          </template>
        </el-table-column>        
         <el-table-column label="充值手续费" align="center" prop="rechargeFeeSum">
          <template slot-scope="{row}">
            {{row.rechargeFeeSum | currency}}
          </template>
        </el-table-column>
         <el-table-column label="提现手续费" align="center" prop="withdrawFeeSum">
          <template slot-scope="{row}">
            {{row.withdrawFeeSum | currency}}
          </template>
        </el-table-column>
         <el-table-column label="红利（加币）" align="center" prop="bonusSum">
        <template slot-scope="{row}">
          {{row.bonusSum | currency}}
        </template>
      </el-table-column>
      <el-table-column label="返水" align="center" prop="rebateSum">
        <template slot-scope="{row}">
          {{row.rebateSum | currency}}
        </template>
      </el-table-column>   
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {form, grid, dialog} from '@/build';

  import {
    reportPlayerSubListApi as listApi,
  } from '@/services/api/report';

  export default {
    name: 'report-agency-sublist',

    mixins: [form, grid, dialog],

    props: ['rowData'],

    data() {
      return {
        tableData: {
          list: [],
          total: 0
        },
        form:{
          userType: undefined,
          userName:undefined,
          filter:undefined,
          filterMin:undefined,
          filterMax:undefined,
        },
        filters:{
          parentId:1,
          page:1,
          size: 20,
        },
        filterDateType: false,
      }
    },
    methods:{
      submitFilterForm(){
        this.filters = {...this.filters,...this.form}
        this.getAll()
      },

    },

    mounted() {
      if(!_.isUndefined(this.rowData)){
        this.filters.parentId  = this.rowData.uid
      }

      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });

      this.getAll();
    }
  }
</script>

